<template>
  <!-- 用户地址信息展示组件 -->
  <el-card>
    <el-button type="primary" @click="showEdit" style="float: right"
      >新增地址信息</el-button
    >
    <br />
  </el-card>
  <el-card class="table-data-card">
    <Table
      :columns="columns"
      :fetch="loadDataList"
      :dataSource="tableData"
      :options="tableOptions"
    >
      <template #slotIsDefault="{ row }">
        <div v-if="row.isDefault == 1" style="color: blue">默认地址</div>
        <div v-else>否</div>
      </template>
      <template #slotOperation="{ row }">
        <el-dropdown placement="bottom-end" trigger="click">
          <span class="iconfont icon-caozuo"></span>
          <template #dropdown>
            <el-dropdown-item @click="showEdit(row)"
              >修改地址信息</el-dropdown-item
            >
            <el-dropdown-item @click="deleteAddress(row)"
              >删除地址信息</el-dropdown-item
            >
            <el-dropdown-item
              v-if="row.isDefault == 0"
              @click="updateStatus(row.id, 1)"
              >设为默认地址</el-dropdown-item
            >
            <el-dropdown-item v-else @click="updateStatus(row.id, 0)"
              >取消默认地址</el-dropdown-item
            >
          </template>
        </el-dropdown>
      </template>
    </Table>
  </el-card>
  <AddressEdit ref="addressEditRef" @reload="loadDataList" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import AddressEdit from "./AddressEdit.vue";
const addressEditRef = ref(null);
const showEdit = (row) => {
  addressEditRef.value.show(row);
};

const deleteAddress = async (row) => {
  proxy.Confirm({
    message: "确定删除该地址信息吗？",
    okFun: async () => {
      let result = await proxy.Request({
        method: "delete",
        url: proxy.Api.deleteAddressById + row.id,
      });
      if (!result) {
        return;
      }
      proxy.Message.success("删除成功");
      loadDataList();
    },
  });
};

const updateStatus = async (id, isDefault) => {
  let result = await proxy.Request({
    method: "put",
    url: proxy.Api.updateAddressStatus + id + "/" + isDefault,
  });
  if (!result) {
    return;
  }
  proxy.Message.success("设置成功");
  loadDataList();
};

const tableData = ref({
  pageNo: 1,
  pageSize: 15,
});
const tableOptions = {};
const searchForm = ref({});

const loadDataList = async () => {
  let result = await proxy.Request({
    url: proxy.Api.queryMyAddresses,
  });
  if (!result) {
    return;
  }
  Object.assign(tableData.value, result);
  tableData.value.totalCount = result.data.length;
};

const columns = [
  {
    label: "联系人",
    prop: "contact",
  },
  {
    label: "联系电话",
    prop: "mobile",
  },
  {
    label: "省",
    prop: "province",
  },
  {
    label: "市",
    prop: "city",
  },
  {
    label: "区/县",
    prop: "town",
  },
  {
    label: "具体地址",
    prop: "street",
  },
  {
    label: "是否默认地址",
    prop: "isDefault",
    scopedSlots: "slotIsDefault",
  },
  {
    label: "操作",
    prop: "operation",
    width: 100,
    scopedSlots: "slotOperation",
  },
];
</script>

<style lang="scss" scoped>
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
